$(function () {
    render();

    $("#title").on("keydown", function (e) {
        // console.log(e.keyCode);
        // 回车是13
        if (e.keyCode === 13) {
            // alert("回车")
            if ($(this).val().trim() !== "") {
                var data = getDate();
                // 更新数据,追加
                data.push({
                    title: $(this).val(),
                    done: false
                });
                // 再把新数组存储到本地
                setData(data);
                // 再把本地存储渲染到页面上
                render();
                $(this).val("");
            }
        }
    });


    $("ol, ul").on("click", "a", function () {
        var data = getDate();
        // 获取索引
        var index = $(this).attr("index");
        // 移除
        data.splice(index, 1);
        setData(data);
        render();
    });


    $("ol, ul").on("click", "input", function () {
        var data = getDate();
        var index = $(this).siblings("a").attr("index");
        data[index].done = $(this).prop("checked");
        setData(data);
        render();
    });

    // 双击修改内容
    $("ol, ul").on("dblclick", "p", function () {
        var data = getDate();
        var index = $(this).siblings("a").attr("index");
        var str = $(this).text();
        $(this).prepend('<input type="text" />');
        var input = $(this).children();
        input.val(str);
        input.select();

        $(input).on("blur", function () {
            data[index].title = input.val();
            setData(data);
            render();
        });

        $(input).on("keyup", function (e) {
            if (e.keyCode === 13) {
                this.blur();
            }
        });
    });

    // ----------------------------------------------------

    // 读取本地储存的数据
    function getDate() {
        var data = localStorage.getItem("todolist");
        if (data !== null) {
            return JSON.parse(data);
        } else {
            return [];
        }
    }

    // 储存本地数据
    function setData(data) {
        localStorage.setItem("todolist", JSON.stringify(data));
    }

    // 渲染
    function render() {
        var data = getDate();
        // 遍历前先清空
        $("ol, ul").empty();

        var doneCount = 0;
        var todoCount = 0;

        // 遍历追加li
        $.each(data, function (i, ite) {
            // console.log(ite);
            if (ite.done) {
                $("ul").prepend(
                    "<li><input type='checkbox' checked='checked' > <p>" +
                    ite.title +
                    "</p> <a href='javascript:;' index=" +
                    i +
                    "></a></li>"
                );
                doneCount++;
            } else {
                $("ol").prepend(
                    "<li><input type='checkbox'> <p>" +
                    ite.title +
                    "</p> <a href='javascript:;' index=" +
                    i +
                    "></a></li>"
                );
                todoCount++;
            }
        });
        $("#donecount").text(doneCount);
        $("#todocount").text(todoCount);
    }
});

// ----------------------------------------------------

// Nginx代理跨域(看render.md文件介绍代理使用方式)
// 发送请求
pAjax({
    url: '/tby2s3',
    dataType: 'json',
}).then(res => {
    // console.log(res);
    // console.log(res.ip);
    // console.log(res.country);
    // console.log(res.area);
    // 渲染
    $('#ipv4').html(res.ip);
    $('#addr').html(res.country + res.area);
})